<template>
    <div class="bodu">
      <div class="bgBOX">
        <div class="userINFO">
          <img class="touxiang" :src="user_logo" alt="">
          <div class="uesr_info">
            <span class="font_333_36">{{user_name}}</span>
            <span class="font_666_30">{{user_phone}}</span>
          </div>
        </div>
        <ul class="dingdanBOX common_bg_fff">
          <li @click="linkTOorder(1)">
            <i class="inlineBlockIcon all"></i>
            <span class="font_333_30">全部</span>
          </li>
          <li @click="linkTOorder(2)">
            <i class="inlineBlockIcon jiedan"></i>
            <span class="font_333_30">待接单</span>
          </li>
          <li @click="linkTOorder(3)">
            <i class="inlineBlockIcon pay"></i>
            <span class="font_333_30">待支付</span>
          </li>
          <li @click="linkTOorder(4)">
            <i class="inlineBlockIcon pingjia"></i>
            <span class="font_333_30">待评价</span>
          </li>
          <li @click="linkTOorder(5)">
            <i class="inlineBlockIcon wancheng"></i>
            <span class="font_333_30">已完成</span>
          </li>
        </ul>
      </div>

      <ul class="centerLIST_box common_bg_fff">
        <li class="centerLIST">
          <router-link :to="{path:'/recovery/ChooseAdress'}" class="router">
            <div class="centerLIST_tobox">
              <div class="centerLIST_logoBOX"><i class="inlineBlockIcon dizhi"></i></div>
              <span class="font_333_30">地址管理</span>
            </div>
            <i class="iconfont icon-jiantouyou font_333_30"></i>
          </router-link>
        </li>
        <li class="centerLIST">
          <router-link :to="{path:'/order/1'}" class="router">
            <div class="centerLIST_tobox">
              <div class="centerLIST_logoBOX"><i class="inlineBlockIcon dingdan"></i></div>
              <span class="font_333_30">我的订单</span>
            </div>
            <i class="iconfont icon-jiantouyou font_333_30"></i>
          </router-link>
        </li>
        <li class="centerLIST">
          <router-link :to="{path:'/wallet'}" class="router">
            <div class="centerLIST_tobox">
              <div class="centerLIST_logoBOX"><i class="inlineBlockIcon qianbao"></i></div>
              <span class="font_333_30">我的钱包</span>
            </div>
            <i class="iconfont icon-jiantouyou font_333_30"></i>
          </router-link>
        </li>
        <li class="centerLIST">
          <router-link :to="{path:'/aboutUs'}" class="router">
            <div class="centerLIST_tobox">
              <div class="centerLIST_logoBOX"><i class="inlineBlockIcon guanyu"></i></div>
              <span class="font_333_30">关于我们</span>
            </div>
            <i class="iconfont icon-jiantouyou font_333_30"></i>
          </router-link>
        </li>
        <li class="centerLIST">
          <router-link :to="{path:'/Feedback'}" class="router">
            <div class="centerLIST_tobox">
              <div class="centerLIST_logoBOX"><i class="inlineBlockIcon yijian"></i></div>
              <span class="font_333_30">意见反馈</span>
            </div>
            <i class="iconfont icon-jiantouyou font_333_30"></i>
          </router-link>
        </li>
        <li class="centerLIST">
          <router-link :to="{path:'/binding'}" class="router">
            <div class="centerLIST_tobox">
              <div class="centerLIST_logoBOX"><i class="inlineBlockIcon bangding"></i></div>
              <span class="font_333_30">绑定手机</span>
            </div>
            <i class="iconfont icon-jiantouyou font_333_30"></i>
          </router-link>
        </li>
      </ul>

      <!--<div class="exit font_4B4A8A_30 common_bg_fff">退出登录</div>-->

      <!--底部tab-->
      <ul class="tab common_bg_fff">
        <li class="font_999_36" @click="toIndex"><span class="iconfont icon-shouye"></span><span>首页</span></li>
        <li class="font_28AC4F_36"><span class="iconfont icon-wode-wode"></span><span>我的</span></li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: '',
        components: {},
        data() {
            return {
              user_logo:'',
              user_name:'',
              user_phone:'',
            }
        },
        mounted: function () {
          if(this.$store.state.userInfo.name){
            this.user_logo = this.axios.defaults.baseURL+this.$store.state.userInfo.logo||''
            this.user_name = this.$store.state.userInfo.name||''
            this.user_phone = this.$store.state.userInfo.phone||''
          }else{
            this.axios.post('/home/Api/userBase',{token:this.$store.state.token}).then((res)=>{
              if(res.data.code==200){
                this.user_logo = this.axios.defaults.baseURL+res.data.data.headimg||''
                this.user_name = res.data.data.nickname||''
                this.user_phone = res.data.data.tel||''
                let obj = {
                  logo:res.data.data.headimg||'',
                  name:res.data.data.nickname||'',
                  phone:res.data.data.tel||'',
                }
                this.$store.commit('userInfo',obj)
              }
            })
          }
        },
        methods: {
          toIndex(){
            this.$router.push('/Index')
          },
          linkTOorder(id){
            this.$router.push('/order/'+id)
          }
        }
    }
</script>

<style scoped>
  @import "../../assets/public.css";
  @import "//at.alicdn.com/t/font_814275_a49o0xc0z4m.css";

  .bgBOX{
    width:100%;
    height:2.77rem;
    background-image: url("img/bg.png");
    background-size: 100% 100%;
    position: relative;
  }
  .userINFO{
    padding:.45rem 0 0 .55rem;
    display: flex;
    align-items: center;
  }
  .touxiang{
    width:1.02rem;
    height:1.02rem;
    display: block;
    border-radius: 50%;
    margin-right:.22rem;
  }
  .uesr_info{
    display: flex;
    flex-direction: column;
    height:1.02rem;
    justify-content: space-around;
  }
  .uesr_info>span:first-child{
    font-weight: 500;
  }
  .uesr_info>span:last-child{
    font-weight: 400;
  }
  .dingdanBOX{
    width:6.86rem;
    height:1.84rem;
    border-radius: .2rem;
    position: absolute;
    bottom:-.71rem;
    left:50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
  }
  .dingdanBOX>li{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .dingdanBOX>li>span{
    font-weight: 400;
    margin-top:.21rem;
    margin-bottom: .39rem;
  }
  .dingdanBOX>li>i.all{
    width: .37rem;
    height:.45rem;
    background-image: url("img/all.png");
  }
  .dingdanBOX>li>i.jiedan{
    width: .36rem;
    height:.42rem;
    background-image: url("img/jiedan.png");
  }
  .dingdanBOX>li>i.pay{
    width: .45rem;
    height:.45rem;
    background-image: url("img/pay.png");
  }
  .dingdanBOX>li>i.pingjia{
    width: .41rem;
    height:.41rem;
    background-image: url("img/pingjia.png");
  }
  .dingdanBOX>li>i.wancheng{
    width: .46rem;
    height:.46rem;
    background-image: url("img/wancheng.png");
  }

  /*list*/
  .centerLIST_box{
    margin-top:1.06rem;
    padding: 0 .33rem;
  }
  .centerLIST_logoBOX{
    width:.67rem;
  }
  .centerLIST_box>li:not(:first-child){
    border-top:1px solid #ddd;
  }
  .centerLIST>.router{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height:.91rem;
  }
  .centerLIST_tobox>span{
    font-weight:400;
  }
  .centerLIST_tobox{
    display: flex;
    align-items: center;
  }
  .dizhi{
     width:.26rem;
     height:.35rem;
     background-image: url("img/dizhi.png");
  }
  .dingdan{
    width:.34rem;
    height:.33rem;
    background-image: url("img/dingdan.png");
  }
  .qianbao{
    width:.30rem;
    height:.26rem;
    background-image: url("img/qianbao.png");
  }
  .guanyu{
    width:.31rem;
    height:.31rem;
    background-image: url("img/guanyu.png");
  }
  .yijian{
    width:.29rem;
    height:.25rem;
    background-image: url("img/yijian.png");
  }
  .bangding{
    width:.31rem;
    height:.31rem;
    background-image: url("img/bangding.png");
  }

  /*退出登录*/
  .exit{
    width:6.9rem;
    height:.88rem;
    margin:.82rem auto 0;
    text-align: center;
    line-height: .88rem;
  }
  /*底部tab*/
  .bodu{
    padding-bottom: 1.41rem;
  }
  .tab{
    height:.98rem;
    width:100%;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
    display: flex;
    align-items: center;
    margin-top:.26rem;
    position: fixed;
    bottom:0;
  }
  .tab>li{
    flex:1;
    height:.98rem;
    text-align: center;
    line-height: .98rem;
  }
  .tab>li>span:last-child{
    padding-left:0.1rem;
  }
  .tab>li:first-child{
    border-right:1px solid #ddd;
  }
</style>
